<script setup>
import { wjakblsd } from '@/api/pannel/production_pannel.js'
import { formatMoney } from '@/utils/globalMethod'

const key = ref(1)

const config = reactive({
  header: ['工单单号', '产品编号', '产品名称', '产品型号', '数量', '生产进度'],
  useHTML: true,
  data: [],
  index: false,
  align: ['center', 'center', 'center', 'center', 'center', 'center'],
  columnWidth: [180, 180, 180, 180, 80, 200],
  headerBGC: 'rgba(0,0,0,0)',
  oddRowBGC: 'rgba(0,0,0,0)',
  evenRowBGC: 'rgba(0,0,0,0)',
  rowNum: 10
})

const calculateCompletionPercentage = scjd => {
  // 使用正则表达式提取所有 / 后面的数字
  const matches = scjd.match(/\/(\d+)/g)

  if (!matches || matches.length === 0) {
    return 0 // 如果没有匹配到任何数字，返回 0%
  }

  // 提取数字并转换为整数
  const numbers = matches.map(match => parseInt(match.replace('/', ''), 10))

  // 总数为 / 的数量
  const totalCount = numbers.length

  // 已完成的数量为 / 后面不为 0 的数量
  const completedCount = numbers.filter(num => num !== 0).length

  // 计算完成比例（百分比）
  const completionPercentage = ((completedCount / totalCount) * 100).toFixed(0)

  return completionPercentage
}
const loadData = async () => {
  const { data } = await wjakblsd({
    data: ['19910101', '20991230'],

    BillStatus: 0,
    FromDevice: 'Visual'
  })
  config.data = data.map((item, index) => {
    return [
      item.gddh,
      item.cpbh,
      item.cpmc,
      item.cpgg,
      (item.gdsl = formatMoney(null, item.gdsl)),
      `<div class="progress-bar"><div class="progress" style="width: ${calculateCompletionPercentage(
        item.scjd
      )}%"></div><div class="text">${calculateCompletionPercentage(item.scjd)}%</div></div>`
    ]
  })
}

const keyResize = () => {
  nextTick(() => {
    setTimeout(() => {
      key.value++
    }, 100)
  })
}

onMounted(loadData)
onMounted(() => {
  window.addEventListener('resize', keyResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', keyResize)
})
</script>

<template>
  <div class="ps_w_h_100">
    <dv-border-box8 :key="key">
      <dv-scroll-board :config="config" />
    </dv-border-box8>
  </div>
</template>

<style scoped lang="scss">
:deep .progress-bar {
  position: relative; /* 定位基准 */
  width: 100%;
  height: 10px;
  background-color: #2d3d4d; /* 背景色（未完成部分的颜色） */
  border-radius: 10px;
  overflow: hidden;
  margin-top: 8%;
}

:deep .progress {
  position: absolute; /* 绝对定位，从左侧开始填充 */
  left: 0; /* 强制从左侧开始 */
  top: 0;
  height: 100%;
  background: linear-gradient(to right, #4fd2dd, #00f2fe); /* 从左到右渐变 */
  z-index: 1; /* 确保在文字下方 */
  transition: width 0.3s; /* 可选：添加过渡动画 */
}

:deep .text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-size: 12px;
  z-index: 2; /* 确保文字在顶部 */
  pointer-events: none; /* 防止文字拦截点击事件 */
}
</style>
